<template>
	<div class="zh-operation-log">
		<nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width" style="width: 120px">
						<el-select v-model="role_id" filterable placeholder="请选择">
						    <el-option
						      v-for="item in roleData"
						      :key="item.id"
						      :label="item.name"
						      :value="item.id">
						    </el-option>
						</el-select>
					</div>
					<div class="open-width" style="width: 320px">
                        <el-date-picker
                            v-model="pickerTime"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
					</div>
					<div class="open-width" style="width: 300px">
						<el-input v-model="keyword" placeholder="请输入用户名、用户账号、内容id或name搜索" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
				</div>
			</div>
			<div class="zh-table-contents"
				v-loading="loading.status"
				:element-loading-text="loading.txt">
				<el-table
				    :data="LogList"
                    ref="logTable"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="index"
                      :index="typeIndex"
				      label="序号"
				      align="center"
				      show-overflow-tooltip
				      width="50"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="number"
				      label="用户帐号"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="name"
				      label="用户名称"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="school_name"
				      label="所属院校"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="rolename"
				      label="角色"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="create_time"
				      label="操作时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="create_ip"
				      label="操作IP"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop=""
				      label="操作日志"
				      align="center"
					  width="500"
				      show-overflow-tooltip>
                        <template slot-scope="scope">
                            <!-- <template v-if="1">
                               <span class="opertion-content">{{scope.row.content}}</span>
                                <span class="opertion-detail" @click="checkDetail(scope.row.id)">查看详情</span>
                            </template>
                            <template v-else> -->
                               {{scope.row.content}}
                            <!-- </template> -->
                        </template>
				    </el-table-column>
				</el-table>

				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="logParam.page"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="logParam.size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>

        <el-dialog 
            :close-on-click-modal="false" 
            :close-on-press-escape="false" 
            title="变更详情" 
            :visible.sync="isCheck" 
            width="600px">
			<div class="details-content">
                <div><span>账号：</span><span>{{name}}</span></div>
                <div><span>用户名：</span><span>{{name}}</span></div>
                <div><span>真实姓名：</span><span>{{name}}</span></div>
                <div><span>姓名拼音：</span><span>{{name}}</span></div>
                <div><span>性别：</span><span>{{name}}</span></div>
                <div><span>学号：</span><span>{{name}}</span></div>
                <div><span>学校：</span><span>{{name}}</span></div>
                <div><span>班级：</span><span>{{name}}</span></div>
                <div><span>班主任：</span><span>{{name}}</span></div>
                <div><span>身份证号：</span><span>{{name}}</span></div>
                <div><span>联系方式：</span><span>{{name}}</span></div>
                <div><span>居住地址：</span><span>{{name}}</span></div>
                <div><span>状态：</span><span :class="1 ? 'text-active' : ''">{{name}}</span></div>
            </div>
		</el-dialog>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
                name: '大学城南',
                isCheck: false,
		    	loading:{
					status: false,
					txt: '获取数据...',
                },
                pickerTime: [], // 开始时间和结束时间
		    	roleData:[],
		    	LogList:[],
		    	logParam:{
		    		role_id:0,
		    		keyword:'',
		    		page_index:1,
					page_size:10,
					start_time:'',
					end_time:'',
				},
				role_id:0,
				keyword:'',
		    	total_number:0,
		        input: '',
		    }
		},
		created(){
			this.getAllRole();
			this.getList()
		},
		methods: {
            /**
             * 查看操作记录详情
             * @param {Number} id 记录id
             */
            checkDetail(id) {
                let success = (res => {
					this.isCheck = true;
				});
	
  				this.$ajax.get('', {params: {}, func: {success: success}})
            },
			searchFunc(){
				this.logParam.role_id = this.role_id;
                this.logParam.start_time = this.pickerTime.length > 0 ? this.pickerTime[0] : '';
				this.logParam.end_time = this.pickerTime.length > 0 ? this.pickerTime[1] : '';
				this.logParam.keyword = this.keyword;
				this.logParam.page = 1;
				this.getList();
			},
			reset() {
				this.role_id = 0;
				this.pickerTime = [];
				this.keyword = '';
				this.logParam = {
		    		role_id:0,
		    		keyword:'',
		    		page_index:1,
					page_size:10,
					start_time:'',
					end_time:'',
				}
				this.getAllRole();
				this.getList();
			},
			// 序号
            typeIndex(index) {
                return index + (this.logParam.page_index - 1) * this.logParam.page_size + 1;
            },
			getAllRole(){
				// 重写成功回调
				let success = ( data => {
					this.roleData = data.data;
					this.roleData.unshift({id:0,name:'全部角色'})
					this.$forceUpdate();//强制渲染
				});
	
  				this.$ajax.get('api/user/user_admin_role',{params:{},func:{success:success}})
		    },
			getList(){
				this.loading.status = true;
            	let success = (data=>{
            		this.loading.status = false;
            		this.LogList = data.data.data;

                    // element ui table 添加数据行后滚动条滚动到对应的行头
                    this.$refs.logTable.bodyWrapper.scrollTop =0;
            		this.total_number = data.data.data_sum;
            	})
            	let fail = ( data => {
            		this.loading.status = false
            		this.$message.error(data.msg)
            	})
            	//执行请求，并将回调方法变成config成员以便鉴权过期可以执行
            	this.$ajax.get('api/user/user_Log',{params: this.logParam,func:{success:success,fail:fail}})
            },
			//选中
		    tableSelectionChange(val) {
                this.selected = val;
            },
		    handleSizeChange(val) {
		    	this.logParam.page_index = 1;
		    	this.logParam.page_size = val;
		    	this.getList()
		    },
		    handleCurrentChange(val) {
		    	this.logParam.page_index = val;
		    	this.getList();
		    },
		    deleteLog_confirm(obj){
				let yes = ( data => {
					this.changeLog(obj.id,0);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定删除该记录吗？'});

			},
	      	deleteMuiltLog_confirm(){
				if( this.selected.length === 0 ) {
					this.$message.warning("请选择要删除的项");
					return false;
				}
				let yes = ( data => {
					this.deleteMuiltLog();
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定要删除选中的项吗？'});

			},
	      	deleteMuiltLog(){
				var ids = [];
				for (var i = this.selected.length - 1; i >= 0; i--) {
					ids.push(this.selected[i].id)
				}
				this.changeLog(ids,0);
			},
			
		    changeLog(id,status){
		    	let success = ( data => {
		    		this.$message.success(data.msg)
					this.getList();
				});
		    	this.$ajax.put('api/user/change_user_Log',{id:id,status:status},{func:{success:success}})
		    },
		},
  	}
</script>
<style lang="scss">
	.zh-operation-log {
		.open-width {
			.el-date-editor {
				width: 100%;
				vertical-align: middle;
			}
		}

        .opertion-content {
            display: block;
            width: calc(100% - 80px);
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .opertion-detail {
            position: absolute;
            top: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 100%;
            color: #169BD5;
            background: #fff;
            cursor: pointer;
            text-decoration: underline;
        }

        .details-content {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding-bottom: 20px;
            color: #7B7B7B;

            >div {
                display: flex;
                align-items: center;
                justify-content: center;
                padding-bottom: 20px;
                width: 50%;

                >span:first-child {
                    display: inline-block;
                    width: 80px;
                }

                >span:last-child {
                    color: #000;
                }

                .text-active {
                    color: #0E89FD !important;
                    text-decoration: underline;
                }
            }

            // >div:last-child {
            //     >span:last-child {
            //         color: red;
            //     }
            // }
        }
	}
</style>